<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul>
          <li v-for="(item,index) of list" :key="index" class="items">
            <div>
              <span>流水序号：</span>
              <span>{{index+1}}</span>
            </div>
            <!-- <div>
              <span></span>
              <span>{{item.taskCode}}</span>
            </div>-->
            <div>
              <span>事件类型：</span>
              <span>{{item.eventType}}</span>
            </div>
            <div>
              <span>事件等级：</span>
              <span>{{item.eventLevel}}</span>
            </div>
            <div>
              <span>手术时间：</span>
              <span>{{item.operateTime}}</span>
            </div>
            <div>
              <span>腕带编码：</span>
              <span>{{item.wristBandCode}}</span>
            </div>
            <div>
              <span>患者姓名：</span>
              <span>{{item.patientName}}</span>
            </div>
            <div>
              <span>患者性别：</span>
              <span>{{item.patientSex}}</span>
            </div>
            <div>
              <span>患者年龄：</span>
              <span>{{item.patientAge}}</span>
            </div>
            <div>
              <span>患者电话：</span>
              <span>{{item.telephone}}</span>
            </div>
            <div>
              <span>患者病况：</span>
              <span>{{item.condition}}</span>
            </div>
            <div>
              <span>送往医院：</span>
              <span>{{item.sendHospital}}</span>
            </div>
            <div>
              <span>诊断情况：</span>
              <span>{{item.diaCondition}}</span>
            </div>
            <!-- <div>
              <span>事件等级</span>
              <span>{{item.operateDate}}</span>
            </div>-->
            <div>
              <span>预警级别：</span>
              <span>{{item.alertLevel}}</span>
            </div>
            <div>
              <span>事件名称：</span>
              <span>{{item.eventName}}</span>
            </div>
            <div>
              <span>事件地点：</span>
              <span>{{item.eventAddress}}</span>
            </div>
            <div>
              <span>车辆标识：</span>
              <span>{{item.ambSign}}</span>
            </div>
            <!-- <span>{{item.toldCode}}</span> -->
            <!-- <span>{{item.workPlace}}</span> -->
            <!-- <span>{{item.temperature}}</span> -->
            <!-- <span>{{item.livePlace}}</span> -->
            <!-- <span>{{item.operateId}}</span> -->
            <!-- <span>{{item.IDCard}}</span> -->
            <!-- <span>{{item.alertLevelCode}}</span> -->
            <!-- <span>{{item.eventCode}}</span> -->
            <!-- <span>{{item.doctor}}</span> -->
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "Flow",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        let diseaseList = this.$store.state.diseaseList;
        //console.log(this.diseaseList);
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        let len = this.list.length;

        for (let i = 0; i < 3; i++) {
          let index = len + i;
          //console.log(index);
          if (index >= diseaseList.length) {
            this.finished = true;
            break;
          } else {
            this.list.push(diseaseList[index]);
            this.loading = false;
          }
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
  // mounted() {
  //   let timer = setInterval(() => {
  //     let diseaseList = this.$store.state.diseaseList;
  //     if (diseaseList != "") {
  //       clearInterval(timer);
  //     }
  //     console.log(diseaseList);
  //   }, 500);
  // }
  ,
  watch: {
    "$store.state.diseaseList": {
      handler(val) {
        //console.log(val);
        this.refreshing=true;
        this.onRefresh();
        // this.diseaseList = val;
        // this.sum=val.length;
      },
      deep: true
    }
  },
  // computed: {
  //   diseaseList() {
  //     return ;
  //   }
  // },
  // watch:{
  //   diseaseList(){
  //     this.refreshing=true;
  //     this.onRefresh();
  //   }
  // }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.items {
  height: 320px;
  border-bottom: 1px solid #333366;
  display: flex;
  /* flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content:space-around; */
  flex-direction: column;
  justify-content: center;
}
.items > div {
}
.items > div > span:first-child {
  font-weight: bold;
}
.items > div > span:last-child {
  color: #663366;
  font-size: 13px;
}
</style>
